What is prismjs?
PrismJS is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It's used to make code snippets in web pages prettier and more readable. It supports a wide range of programming languages and comes with a variety of themes.
What are prismjs's main functionalities?
Syntax Highlighting
This feature allows you to highlight syntax of various programming languages. The code sample demonstrates how to highlight JavaScript code using PrismJS.
Prism.highlight(code, Prism.languages.javascript, 'javascript');
Extensible Language Definitions
PrismJS allows you to extend existing language definitions to add new patterns or modify existing ones. The code sample shows how to add a new pattern to the JavaScript language definition.
Prism.languages.insertBefore('javascript', 'function-variable', {
'function-variable': {
pattern: /\bvar\s+[a-z0-9_]+\s*=\s*function\b/,
alias: 'function'
}
});
Custom Hooks
You can add custom hooks to modify code or the environment before or after the highlighting process. The code sample demonstrates a hook that replaces occurrences of 'foo' with 'bar' before highlighting.
Prism.hooks.add('before-highlight', function(env) {
env.code = env.element.textContent.replace(/\bfoo\b/g, 'bar');
});
Themes
PrismJS comes with a variety of themes that can be easily included in your web page to change the appearance of highlighted code. The code sample shows how to include a PrismJS theme in an HTML document.
<link href="themes/prism.css" rel="stylesheet" />
Plugins
PrismJS supports plugins that add additional functionality, such as displaying line numbers. The code sample demonstrates how to include the line numbers plugin.
<script src="plugins/line-numbers/prism-line-numbers.js"></script>
Other packages similar to prismjs
highlight.js
Highlight.js is another popular syntax highlighter that is often compared to PrismJS. It supports more languages out of the box and is used by many projects. However, it is larger in size compared to PrismJS, which aims to be lightweight.
shjs
SHJS is a JavaScript syntax highlighting engine that can highlight source code in HTML documents. It is less popular and not as actively maintained as PrismJS, and it has a smaller community and fewer features.
rainbow
Rainbow is a small, fast, and customizable option for syntax highlighting. It is similar to PrismJS in terms of goals and size, but it has a different plugin system and fewer languages supported by default.
syntaxhighlighter
SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. It is one of the older options available and offers a wide range of themes and brushes (language definitions), but it is bulkier compared to PrismJS.
Prism is a lightweight, robust, and elegant syntax highlighting library. It's a spin-off project from Dabblet.
You can learn more on prismjs.com.
Why another syntax highlighter?
More themes for Prism!
Contribute to Prism!
Important Notice
We are currently working on Prism v2 and will only accept security-relevant PRs for the time being.
Once work on Prism v2 is sufficiently advanced, we will accept PRs again. This will be announced on our Discussion page and mentioned in the roadmap discussion.
Prism v1 contributing notes
Prism depends on community contributions to expand and cover a wider array of use cases. If you like it, consider giving back by sending a pull request. Here are a few tips:
- Read the documentation. Prism was designed to be extensible.
- Do not edit
prism.js
, it’s just the version of Prism used by the Prism website and is built automatically. Limit your changes to the unminified files in the components/
folder. prism.js
and all minified files are generated by our build system (see below). - Use
npm ci
to install Prism's dependencies. Do not use npm install
because it will cause non-deterministic builds. - The build system uses gulp to minify the files and build
prism.js
. With all of Prism's dependencies installed, you just need to run the command npm run build
. - Please follow the code conventions used in the files already. For example, I use tabs for indentation and spaces for alignment. Opening braces are on the same line, closing braces on their own line regardless of construct. There is a space before the opening brace. etc etc.
- Please try to err towards more smaller PRs rather than a few huge PRs. If a PR includes changes that I want to merge and also changes that I don't, handling it becomes difficult.
- My time is very limited these days, so it might take a long time to review bigger PRs (small ones are usually merged very quickly), especially those modifying the Prism Core. This doesn't mean your PR is rejected.
- If you contribute a new language definition, you will be responsible for handling bug reports about that language definition.
- If you add a new language definition or plugin, you need to add it to
components.json
as well and rebuild Prism by running npm run build
, so that it becomes available to the download build page. For new languages, please also add a few tests and an example in the examples/
folder. - Go to prism-themes if you want to add a new theme.
Thank you so much for contributing!!
Software requirements
Prism will run on almost any browser and Node.js version but you need the following software to contribute:
- Node.js >= 10.x
- npm >= 6.x
Translations